<template>
    <div class="oldversion">
        <Header :title="header_title"></Header>
        <div class="topheader page">
            <div class="itembox disFlex" v-for="(item, index) in itemList" :key="index" @click="topage(item)">
                <div class="leftItem">
                    <label for="" class="fontBlack2 font36 textL">{{ item.title }}</label>
                    <label for="" class=" font40 fontGrayB9 textL" v-if="!item.data">{{ item.placeholder }}</label>
                    <label for="" class="fontBlack2 font40 textL wrap" v-else>{{ item.data }}</label>
                </div>
                <img :src="require('@/assets/images/chevron-right.png')" class="old_rightIcon1" v-if="index != 2 && index != 4">
            </div>
            <div class="blockbox"></div>
            <div class="bottom_submitBtn">
                <div @click="submit" class="font44 bgBlueFC fontWhite">保存</div>
            </div>
        </div>
        <van-popup :show="maxshow" round position="bottom">
            <van-picker @change="maxChange" :columns="maxList" @cancel="maxshow = false" @confirm="maxsave" />
        </van-popup>
        <DialogBtn :title="'是否保存当前页面'" :show="exitshow" :isold="true"></DialogBtn>
        <Picker-Popup :ref="'picker'" :columns="column" :show="show" @change="isConfirm" :type="type"></Picker-Popup>
    </div>
</template>

<script>
import Header from '@/components/oldheader.vue'
import PickerPopup from '@/components/pickerpopup.vue'
import DialogBtn from '@/components/dialogbtn.vue';
import { Toast } from 'vant'
import { getCurrentInstance, reactive } from 'vue'
export default {
    components: {
        Header,
        PickerPopup,
        DialogBtn
    },
    data() {
        return {
            header_title: '基本信息',
            right_text: '',
            itemList: [
                { title: '姓名', data: '', placeholder: '请输入', page: 'name' },
                { title: '性别', data: '', placeholder: '请选择', page: 'sex' },
                { title: '证件类型', data: '大陆居民身份证', placeholder: '', page: '' },
                { title: '证件号码', data: '', placeholder: '请输入', page: '' },
                { title: '出生日期', data: '', placeholder: '自动带出', page: '' },
                { title: '最高学历', data: '', placeholder: '请选择', page: 'max' },
                { title: '工作年限', data: '', placeholder: '请输入', page: '' },
                { title: '联系电话', data: '', placeholder: '请输入', page: '' },
                { title: '居住区域', data: '', placeholder: '请选择', page: 'address' },
                { title: '详细地址', data: '', placeholder: '请输入', page: '' },
            ],
            show: false,
            type: '',
            column: [],
            citys: {},
            api: '',
            token: '',
            maxshow: false, //学历选择框
            maxList: [], //学历选择列表
            data: {}, //需要回调的参数id和vesion
            storeData: {}, //仓库里的数据
            ressshow: false, //区域显示布尔
            area: [],
            allArea: [],
            exitshow: false, //是否退出
            idcard: this.$store.state.idCard
        }
    },
    mounted() {
        this.api = getCurrentInstance().appContext.config.globalProperties.$http;
        this.token = this.$store.state.token;
        var that = this;
        // 获取基本信息
        that.api.get('/personnel/h5/resumeInfo/queryOne', {identityNumber: that.idcard}).then(res => {
            var data = res.data;
            var storeData = that.$store.state.myInfo;
            if(storeData.realName) {
                that.storeData =  storeData;
            } else {
                if(data.resumeInfo) {
                    that.storeData = data.resumeInfo;
                    that.$store.commit('setmyInfo', data.resumeInfo);
                } else {
                    that.storeData = storeData;
                }
            };
            that.getMyinfo(that.storeData);
        });
    },
    methods: {
        goback() {
            this.exitshow = true;
        },
        ispopClose() {
            this.$store.commit('setmyInfo', {});
            this.$router.replace('/oldresume');
        },
        ispopSub(value, index, type) {
            if(data.realName && data.identityNumber && data.workingYear && data.highestEducation && data.phoneNumber && data.areaDetail && data.liveArea) {
                var that = this;
                data.createIdentityNumber = that.idcard;
                data.workingYear = parseInt(data.workingYear);
                data.recommendFlg = 1;
                that.api.post('/personnel/h5/resumeInfo/addOrEditResume', data).then(res => {
                    if(res.code == 200) {
                        that.$store.commit('setmyInfo', {});
                        that.$store.commit('settoken', data.identityNumber);
                        that.$router.replace('/oldresume');
                    }
                })
            } else {
                Toast('请正确填写信息');
            }
        },
        // 公用获取数据方法
        getMyinfo(data) {
            var that = this;
            let liveIndex, heigIndex;
            that.itemList.forEach((el, i) => {
                if(el.title == '姓名') {
                    that.itemList[i].data = data.realName;
                } else if(el.title == '证件号码') {
                    if(data.identityNumber) {
                        that.itemList[i].data = data.identityNumber.substr(0,1) + "***************" + data.identityNumber.substr(16, 17);
                    }
                } else if(el.title == '出生日期') {
                    if(data.identityNumber) {
                        that.itemList[i].data = that.getbirth(data.identityNumber);
                    }
                } else if(el.title == '工作年限') {
                    that.itemList[i].data = data.workingYear;
                } else if(el.title == '联系电话') {
                    that.itemList[i].data = data.phoneNumber;
                } else if(el.title == '详细地址') {
                    that.itemList[i].data = data.areaDetail;
                } else if(el.title == '性别') {
                    if(data.sex == '0') {
                        that.itemList[i].data = '男';
                    } else if(data.sex == '1') {
                        that.itemList[i].data = '女';
                    }
                } else if(el.title == '居住区域') {
                    liveIndex = i;
                }else if(el.title == '最高学历'){
                    heigIndex = i;
                }
            });
            that.geteducation(heigIndex, data.highestEducation);// 获取学历列表
            that.getcity(liveIndex, data.liveArea); // 获取区域列表
        },
        topage(e) {
            if (e.placeholder == '请输入') {
                this.$router.push({name:'oldname',params: {page:e.title}});
            } else if (e.placeholder == '请选择') {
                this.type = e.page;
                if (e.page == 'sex') {
                    this.column = ['男', '女'];
                    this.show = true;
                } else if (e.page == 'max') {
                    this.maxshow = true;
                } else if(e.page == 'address') {
                    this.column = this.area;
                    this.show = true;
                }
            }
        },
        isClose() {
            this.show = false;
        },
        isConfirm(value, index, type) {
            for (let i of this.itemList) {
                if (i.page == type) {
                    i.data = value;
                    if(i.title == '性别') {
                        if(value == '男'){
                            this.storeData.sex = 0;
                        }else{
                            this.storeData.sex = 1;
                        }
                        this.$store.commit('setmyInfo', this.storeData);
                    } else if(i.title == '居住区域') {
                        for(i in this.allArea){
                            if(value == this.allArea[i]){
                                this.storeData.liveArea = i;
                            }
                        }
                        // this.storeData.liveArea = value;
                        this.$store.commit('setmyInfo', this.storeData);
                    }
                }
            }
            this.show = false;
        },
        isChange(value) {
            this.$refs.picker.setColumnValues(1, this.cities[value[0]]);
        },
        getbirth(IdCard){
            let birthday = IdCard.substring(6, 10) + "-" + IdCard.substring(10, 12) + "-" + IdCard.substring(12, 14);
            return birthday;
        },
        // 获取学历列表
        geteducation(heigIndex, heightVal) {
            var that = this;
            that.maxList = [];
            that.api.get('/personnel/h5/resumeInfo/resumeEducation', {}).then(res => {
                var data = res.data.resumeEducation;
                var arr = [{
                    text: '统招',
                    values: 1
                }, {
                    text: '非统招',
                    values: 0
                }];
                for(let i = 0; i < data.length; i++) {
                    var obj = {};
                    
                    if(heightVal){
                        if(data[i].dictValue == heightVal){
                            that.itemList[heigIndex].data = data[i].dictLabel;
                        }
                    }
                    obj.text = data[i].dictLabel;
                    obj.values = data[i].dictValue;
                    obj.children = [];
                    if(obj.text != '文盲' && obj.text != '小学' && obj.text != '初中' && obj.text != '初中及以下' && obj.text != '高中' && obj.text != '职高' && obj.text != '中专高中') {
                        obj.children = arr;
                    }
                    if(that.storeData.highestEducation == obj.values) {
                        that.itemList[5].data = obj.text;
                    }
                    that.maxList.push(obj);
                };
            })
        },
        // 弹窗确认保存
        maxsave(value) {
            this.storeData.highestEducation = value[0].values;
            this.itemList.filter((item, i) => {
                if(item.title == '最高学历') {
                    this.itemList[i].data = value[0].text;
                }
            })
            if(value[1]) {
                this.storeData.recruitment = value[1].values;
            }
            this.$store.commit('setmyInfo', this.storeData);
            this.maxshow = false;
        },
        // 区域列表
        getcity(liveIndex, liveVal) {
            var that = this;
            that.api.get('/personnel/h5/resumeInfo/getDeptTree', {}).then(res => {
                var data = res.data;
                var arr = [];
                for(let i in data) {
                    if(liveVal){
                        if(i == liveVal){
                            this.itemList[liveIndex].data = data[i];
                        }
                    }
                    arr.push(data[i]);
                };
                for(let i = 0; i < arr.length; i++) {
                    if(arr[i] == '全部区域') {
                        arr.splice(0, 0, arr[i]);
                        arr.splice(i+1, 1);
                    }
                }
                this.area = arr;
                this.allArea = data;
            })
        },
        // 确认保存
        submit() {
            var data = this.storeData;
            if(data.realName && data.identityNumber && data.workingYear && data.highestEducation && data.phoneNumber && data.areaDetail && data.liveArea) {
                var that = this;
                data.createIdentityNumber = that.idcard;
                data.workingYear = parseInt(data.workingYear);
                data.recommendFlg = 1;
                that.api.post('/personnel/h5/resumeInfo/addOrEditResume', data).then(res => {
                    if(res.code == 200) {
                    that.$store.commit('setmyInfo', {});
                        that.$store.commit('settoken', data.identityNumber);
                        that.$router.replace('/oldresume');
                    }
                })
            } else {
                Toast('请正确填写信息');
            }
        }
    }
}
</script>

<style scoped>
.itembox {
    border-bottom: 0.02rem solid #E8E9EC;
    min-height: 1.66rem;
}

.leftItem {
    display: flex;
    flex-direction: column;
}

.leftItem label:nth-child(1) {
    margin-bottom: 0.08rem;
}

.blockbox {
    height: 1.6rem;
}
</style>
